{{include './index_header.html' '蛆蛆音乐'}}
<style>
    .mui-btn-danger .mui-icon {
        /* font-size: 20px; */
        transform: scale(1.5);
        position: relative;
        top: -2px;
        left: -3px;
    }
</style>

<div class="mui-content">

    <div class="mui-card" style="text-align: center;">
        <!--页眉，放置标题-->

        <!--内容区-->
        <div class="mui-card-content">
            <img src="" alt="">
        </div>
        <div class="mui-card-header">
            <h4></h4>
        </div>
        <div class="mui-card-header">
            <a class="mui-btn mui-btn-danger" id="collect">
                <span class="mui-icon mui-icon-star"></span>
                收藏
            </a>
            <button type="button" class="mui-btn mui-btn-primary" id="prev">上一首</button>
            <button type="button" class="mui-btn mui-btn-success" id="next">下一首</button>
        </div>
        <!--页脚，放置补充信息或支持的操作-->
        <div class="mui-card-footer">
            <audio controls autoplay src=""></audio>
        </div>
    </div>
</div>



<script>


    var id = location.search.split('=')[1]
    $.get('https://wyy-nine.vercel.app/song/detail?ids=' + id, (data) => {
        
        console.log(data);
        var singers = ''
        data.songs[0].ar.forEach((item) => {
            singers += item.name
        })
        $('h4').html(data.songs[0].name + '----' + singers)
        $('.mui-title').html(data.songs[0].name)
        $('img').attr('src', data.songs[0].al.picUrl)
    })
    $('audio').attr('src', 'https://music.163.com/song/media/outer/url?id=' + id + '.mp3')
    $('audio').on('ended', function () {
        var next = id * 1 + 1
        location.href = '/play?id=' + next

    })
    $('#next').click(function () {
        var next = id * 1 + 1
        location.href = '/play?id=' + next
    })
    $('#prev').click(function () {
        var prev = id * 1 - 1
        location.href = '/play?id=' + prev
    })
    $('#collect').click(function () {
        var name = $.cookie('name')
        var song = $('h4').text()
        console.log(song);
        if(name){
            $.get('/user/collect?id='+id+'&name='+name+'&song='+song,(data)=>{
                mui.confirm(data.msg,'系统提示',['确定','取消'],function(e){
                    if(data.code == 0){
                        if(e.index == 0){
                            $.get('/user/cancel?id='+id,(x)=>{
                                mui.alert(x.msg,'系统提示','确定')
                            })
                        }
                    }
                    
                })
            }) 
        }else{
            mui.confirm('你还未登录','系统提示',['登录','取消'],function(e){
                    if(e.index == 0){
                        location.href = '/mine'
                    }
            })
        }
        
    })
</script>
</body>

</html>